<template>
<div>
    <ul class="radios">
        <li v-for="(item,index) in radiosList" @click="activ(index)" :class="{active:index == noWIndex}">{{item.time}}</li>
    </ul>
</div>
</template>

<script>
export default {
    name:'radios',
    data(){
        return{
       noWIndex:0
        }
    },
    props:{
        radiosList:{
            type:Array,
            default:function(){
                return [
                    {
                        time:'1月',
                        value:1
                    }
                ]
            }
        }
    },
    methods:{
        activ(index){
          this.noWIndex=index;
          this.$emit('radios',this.radiosList[index].value);
          //vuex调用要改变的组件方法
         this.$store.dispatch('updateOrder',["radios",this.radiosList[index].value])
        }
    }
}
</script>

<style scoped>
.radios li{
  width:100px;height:20px;border:1px solid #eee;float:left;margin-right:5px;text-align:center;
}
/* .radios li:hover{background:#4fc08d;color:#fff;} */
.radios li.active{background:#4fc08d;}
</style>
